<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	请输入要查询的城市：<input type="text" id="city">
	<div id="container" style="min-width:400px;height:400px"></div>
</body>
</html>
<script src=" http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://img.hcharts.cn/highcharts/highcharts.js"></script>
<script src="https://img.hcharts.cn/highcharts/modules/exporting.js"></script>
<script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
<script>
	$("#city").blur(function(){
		var city = $(this).val();  //获取城市名
		$.ajax({
			url:"wea.php",
			data:{city:city},
			dataType:"json",
			type:"post",
			success:function(e){
				console.log(e);
				var week = "";
				var temp_low = "[";
				var temp_high = "[";
				$.each(e,function(i,v){
					week+=v.week+",";
					temp_low+=v.temp_low+",";
					temp_high+=v.temp_high+",";
				});
				week = week.substring(0,27);
				week = week.split(",");
				temp_low+="]";
				temp_high+="]";

				var chart = Highcharts.chart('container', {
    chart: {
        type: 'spline'
    },
    title: {
        text: city

    },
    subtitle: {
        text: '数据来源: WorldClimate.com'
    },
    xAxis: {
        categories: week
    },
    yAxis: {
        title: {
            text: '温度'
        },
        labels: {
            formatter: function () {
                return this.value + '°';
            }
        }
    },
    tooltip: {
        crosshairs: true,
        shared: true
    },
    plotOptions: {
        spline: {
            marker: {
                radius: 4,
                lineColor: '#666666',
                lineWidth: 1
            }
        }
    },
    series: [{
        name: '最低温',
        marker: {
            symbol: 'square'
        },
        data: eval(temp_low)
    }, {
        name: '最高温',
        marker: {
            symbol: 'diamond'
        },
        data: eval(temp_high)
    }]
});
	
			}
		});
	}

		)
	
</script>